<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <!-- :pagination="paginationConfig" -->
            <custom-table :scroll="{ y: list.length ? 440 : 0 }" size="small" :loading="loading" rowKey="id" :pagination="false" :columns="tableColumns" :data-source="list" @change="handleTableChange">
                <template #usePercent="{ text }">
                    {{ text }}
                </template>
                <template #released="{ text }">
                    <a-tag color="green" v-if="text">已发布</a-tag>
                    <a-tag color="orange" v-else>未发布</a-tag>
                </template>
            </custom-table>
        </div>
    </div>
</template>

<script lang="ts">
import { CustomTable } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    components: {
        CustomTable
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const tableColumns = computed(() => {
            const columns: any = [
                {
                    title: '名称',
                    width: 200,
                    dataIndex: 'name'
                },
                {
                    title: '产能',
                    dataIndex: 'randdCapacityHours'
                },
                {
                    title: '预估工时',
                    dataIndex: 'planWorkHours'
                },
                {
                    title: '实际耗时',
                    dataIndex: 'expendWorkHours'
                },
                {
                    title: '利用率',
                    dataIndex: 'usePercent',
                    slots: { customRender: 'usePercent' }
                },
                {
                    title: '状态',
                    dataIndex: 'released',
                    width: 150,
                    slots: { customRender: 'released' }
                }
            ];
            return columns;
        });
        const state = reactive<any>({
            loading: false,
            type: '1',
            list: [],
            requireName: '',
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            }
        });
        const handleChange = (val) => {
            state.paginationConfig = {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            };
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
        };
        if (props.detail.pmpJiraVersionStatisticsDTOS) {
            const list: any = props.detail.pmpJiraVersionStatisticsDTOS.map((item) => ({
                ...item,
                usePercent: item.randdCapacityHours ? parseFloat(((item.expendWorkHours / item.randdCapacityHours) * 100).toFixed(1)) + '%' : 0
            }));
            state.list = [...list];
        }

        watch(
            () => props.detail,
            () => {
                if (props.detail.pmpJiraVersionStatisticsDTOS) {
                    const list: any = props.detail.pmpJiraVersionStatisticsDTOS.map((item) => ({
                        ...item,
                        usePercent: item.randdCapacityHours ? parseFloat(((item.expendWorkHours / item.randdCapacityHours) * 100).toFixed(1)) + '%' : 0
                    }));
                    state.list = [...list];
                }
            },
            { deep: true }
        );
        return {
            tableColumns,
            ...toRefs(state),
            handleChange,
            handleTableChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        padding: 24px 0;
    }
}

// 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-table-body) {
    max-height: 450px;
    overflow: auto !important;
}
</style>